// scss-lint:disable QualifyingElement, VendorPrefix

//
// Textual form controls
//

.form-control {
  padding: $input-btn-padding-y $input-btn-padding-x;
  font-size: $input-font-size;
  line-height: $input-form-line-height;
  color: $input-color;
  border: $input-btn-border-width solid $input-border-color;
  font-weight: $font-weight-normal;

  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
  @if $enable-rounded {
    // Manually use the if/else instead of the mixin to account for iOS override
    border-radius: $input-border-radius;
  } @else {
    // Otherwise undo the iOS default
    border-radius: 0;
  }

  // Transitions
  @include transition($input-transition);
  @include form-control-hover();
  @include form-control-focus();

  &::placeholder {
    color: $input-placeholder-color;
  }

  &:disabled,
  &[readonly] {
    background-color: $input-disabled-bg;

    &:hover {
      cursor: not-allowed;
    }
  }
}

//
// Select
//

select.form-control:hover {
  cursor: pointer;
}


//
// Labels
//

// Set uniform font-sizes for labels, col-form-labels and legends.
form {
  label,
  .col-form-label,
  .col-form-legend {
    font-size: $form-labels-font-size;
  }

  label {
    &:hover {
      cursor: pointer;
    }
  }
}


// For use with horizontal and inline forms, when you need the label text to
// align with the form controls.
.col-form-label {
  padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
  padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
}

.col-form-label-lg {
  padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
  padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
  font-size: $font-size-lg;
}

.col-form-label-sm {
  padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
  padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
  font-size: $font-size-sm;
}


//
// Legends
//

// For use with horizontal and inline forms, when you need the legend text to
// be the same size as regular labels, and to align with the form controls.
.col-form-legend {
  padding-top: $input-btn-padding-y;
  padding-bottom: $input-btn-padding-y;
}


// Readonly controls as plain text
.form-control-plaintext {
  padding-top: $input-btn-padding-y;
  padding-bottom: $input-btn-padding-y;
  line-height: $input-btn-line-height;
  font-weight: $font-weight-normal;
}


// Form control sizing
//
// Augments Bootstrap's `.form-control` with modifier classes for small and large
// form control elements. As mentioned in Bootstrap, the `.form-group-* form-control`
// variations are sadly duplicated to avoid the issue documented in:
// https://github.com/twbs/bootstrap/issues/15074.

.form-control-sm {
  padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
  font-size: $font-size-sm;
  @include border-radius($input-border-radius-sm);
}

select.form-control-sm {
  &:not([size]):not([multiple]) {
    height: $input-height-sm;
  }
}

.form-control-lg {
  padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
  font-size: $font-size-lg;
  @include border-radius($input-border-radius-lg);
}

select.form-control-lg {
  &:not([size]):not([multiple]) {
    height: $input-height-lg;
  }
}


// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.

.form-check.disabled {
  .form-check-label {
    color: $text-muted;
  }
}

.form-check-label {
  padding-left: $form-check-input-gutter;
}

.form-check-input {
  margin-top: $form-check-input-margin-y;
  margin-left: -$form-check-input-gutter;
  margin-right: $form-check-input-margin-x;
}


//
// Form validation
//

.invalid-feedback {
  display: none;
  margin-top: .25rem;
  font-size: .875rem;
  color: $form-feedback-invalid-color;
}

@include form-validation-state("valid", $form-feedback-valid-color);
@include form-validation-state("invalid", $form-feedback-invalid-color);
